<template>
	<view class="index">
		<view class="nav">
			<uni-nav-bar backgroundColor="transparent" leftWidth="300rpx" rightWidth="300rpx">
				<block slot="left">
					<view class="nav_left">
						<view class="home" @click="goback">
							<uni-icons type="home-filled" color="#333333" :size="20"></uni-icons>
						</view>
						<view class="address" @click="$util.toUrl('/technician/info/location')">
							<image src="/static/technician/location.png"></image>
							<!-- authInfo.address || -->
							<text class="hidden" style="flex: 1;">{{authInfo.city || city || ''}}</text>
						</view>
					</view>
				</block>
				<block slot="right">
					<view class="nav_right" @click="changeOnlin">
						<uni-icons type="circle-filled" :color="authInfo.online ? '#00CC00' : '#FF0000'"></uni-icons>
						<text :style="`color: ${authInfo.online ? '#00CC00' : '#FF0000'};`">{{authInfo.online ? '可接单' : '不可接单'}}</text>
					</view>
				</block>
			</uni-nav-bar>
		</view>
		
		<view class="banner">
			<view class="list" v-for="(item,index) in bannerList" :key="index" :style="`background: url(${$util.imgurl(item.bg)}) 0 0 no-repeat;background-size: 100%;`" @click="toLink(item.url)">
				<text :style="`color:'${item.color}'`">{{item.title}}</text>
				<i v-if="index == 1 && num>0">{{num>100 ? num : num}}</i>
			</view>
		</view>
		
		<view class="box">
			<view class="notice" style="overflow: hidden;">
				<view class="notice_icon">
					<image src="/static/technician/notice_icon.png"></image>
					<text>公告：</text>
				</view>
				<view class="flex" style="overflow: hidden;">
					<!-- <uni-notice-bar single text="上单APP消息通知设置教程" background-color="#FFF" color="#A0A0A0" /> -->
					<xzw-notice :showIcon="false" :list="list_notice" @goItem="goNoticeItem" @goMore="$util.toUrl('/technician/message/message')"/>
				</view>
			</view>
			
			<view class="user">
				<view class="header">
					<image src="https://qiniu-cdn.maeiyun.com/imgs/technician/index/index_title_bg.png"></image>
				</view>
				
				<!-- <view class="list" @click="toStep">
					<view class="list_title">
						<view class="num">
							<uni-icons type="info" color="#FFF" :size="20"></uni-icons>
						</view>
						<text>技师操作步骤</text>
					</view>
					<view class="btn" style="background: linear-gradient(180deg, #85B3EF 0%, #2C6AD9 100%);">去查看</view>
				</view> -->
				<view class="list" v-if="status == 1">
					<view class="list_title">
						<view class="num">1</view>
						<text>完善个人信息（添加商家后方可接单）</text>
					</view>
					<view class="btn" style="background: linear-gradient(180deg, #85B3EF 0%, #2C6AD9 100%);">已完成</view>
				</view>
				<view class="list" @click="toLink('/otherpages/mine/complaint')" v-else>
					<view class="list_title">
						<view class="num">1</view>
						<text>完善个人信息（添加商家后方可接单）</text>
					</view>
					<view class="btn">去完成</view>
				</view>
				<view class="list no_margin" @click="toClothes">
					<view class="list_title">
						<view class="num">2</view>
						<text>配置工服物料</text>
					</view>
					<view class="btn">去完成</view>
				</view>
			</view>
			
			<view class="card">
				<!-- <view class="list" @click="toMySelf">
					<image src="/static/technician/card_1.png"></image>
					<text>个人主页</text>
				</view> -->
				<view class="list" @click="toLink('/technician/order/order')">
					<image src="/static/technician/card_2.png"></image>
					<text>收入明细</text>
				</view>
				<view class="list" @click="$util.toUrl('/otherpages/message/systemMessage?type=0')">
					<image src="/static/technician/card_3.png"></image>
					<text>平台公告</text>
				</view>
				<view class="list" @click="$util.toUrl('/technician/wallet/wallet')">
					<image src="/static/technician/card_4.png"></image>
					<text>收入提现</text>
				</view>
				<view class="list" @click="$util.toUrl('/technician/business/business?type=0')">
					<image src="/static/technician/card_5.png"></image>
					<text>我的商家</text>
				</view>
				<view class="list" style="background: none;">
					
				</view>
			</view>
			
		</view>
		
		<u-modal v-model="show" @confirm="confirm"
		ref="uModal" :async-close="false" title="确认接单" 
		content="接单后进行扫码，订单开始，同时开始打开手机录音，保证客户与技师的身体以及财务安全！"
		show-cancel-button
		:title-style="{
			'background':'#EAF2FE',
			color:'#2E7EFA',
			'font-weight':600,
			padding:'30rpx 0'
		}"
		:confirm-style="{
			'background':'#EAF2FE',
		}"
		></u-modal>
		
		<u-toast ref="uToast" />
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerList:[
					{
						bg:'/imgs/technician/index/index_banner_1.png',
						title:'个人信息',
						color:'#69749C',
						url:'/otherpages/mine/complaint'
					},
					{
						bg:'/imgs/technician/index/index_banner_2.png',
						title:'在线接单',
						color:'#139383',
						url:'/technician/order/orderList'
					},
					{
						bg:'/imgs/technician/index/index_banner_3.png',
						title:'个人主页',
						color:'#C74428',
						url:null,
					},
					{
						bg:'/imgs/technician/index/index_banner_4.png',
						title:'订单消息',
						color:'#046CC3',
						url:'/otherpages/message/technicianNewsList'
					},
				],
				
				authInfo:'',
				show:false,
				
				list_notice:[],
				
				city:'',
				
				num:10,
				
				status:0,
			}
		},
		methods: {
			toMySelf(){
				// 
				if(!this.authInfo.person_images.length || !this.authInfo.real_name){
					return this.$util.msg('请先上传个人相册和姓名')
				}
				uni.navigateTo({
					url:"/technician/myself/homepage"
				})
			},
			toStep(){
				uni.navigateTo({
					url:"/technician/index/step"
				})
			},
			goNoticeItem(e){
				uni.navigateTo({
					url:`/technician/index/notice?id=${e.id}`
				})
			},
			toClothes(){
				this.$refs.uToast.show({
					title: '开发中 敬请期待',
					type: 'error',
					position:'top',
					icon:false
				})
			},
			goback(){ 
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			toLink(e){
				if(e){
					uni.navigateTo({
						url:e
					})
				}else {
					this.toMySelf()
				}
				
			},
			getNotice(){
				this.request.httpTokenRequest({
					url: "index/platformNotice",
					method: "get"
				}, {
					type:2
				}).then(res => {
					if (res.code == 0) {
						res.data.data.forEach(item=>{
							this.list_notice.push({
								id:item.id,
								title:item.name,
								content:item.content
							})
						})
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
			getAuth(){
				let that = this
				this.request.httpTokenRequest({
					url: "technician.technician/getAuthInfo",
					method: "get"
				}, {}).then(res => {
					if (res.code == 0) {
						that.authInfo = res.data
						uni.setStorageSync('authInfo',that.authInfo)
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
			changeOnlin(){
				this.request.httpTokenRequest({
					url: "technician.technician/getAuthStatus",
					method: "get"
				}, {}).then(res => {
					if (res.code == 0) {
						if(res.data.auth && res.data.images && res.data.location && res.data.service && res.data.time){
							this.changeOnLine()
						}else {
							if(!res.data.auth){
								return this.$util.msg('请先进行实人认证')
							}
							if(!res.data.images){
								return this.$util.msg('请先上传资质认证')
							}
							if(!res.data.location){
								return this.$util.msg('请先选择接单为止')
							}
							if(!res.data.service){
								return this.$util.msg('请先选择服务内容')
							}
							// if(!res.data.time){
							// 	return this.$util.msg('请先选择接单时间')
							// }
						}
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
			changeOnLine(){
				let that = this
				let content = this.authInfo.online ? '确认下线休息' : '确认上线接单'
				this.$util.modal(content,()=>{
					this.request.httpTokenRequest({
						url: "/technician.technician/setTechnicianStatus",
						method: "get"
					}, {}).then(res => {
						this.$util.msg(res.msg)
						if (res.code == 0) {
							that.authInfo.online = that.authInfo.online == 1 ? 0 : 1
						} else {
							return
						}
					}, error => {})
				},'',false)
			},
			getNum(){
				this.request.httpTokenRequest({
					url: "technician.order/getNoReceivingOrder",
					method: "get"
				}, {}).then(res => {
					if (res.code == 0) {
						this.num = res.data.num
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
			confirm(){
				this.$util.scanCode(res=>{
					this.request.httpTokenRequest({
						url: "technician.order/scanOrderQr",
						method: "post"
					}, {
						order_id:res.result
					}).then(data => {
						this.show = false
						if (data.code == 0) {
							uni.reLaunch({
								url:'/technician/recorderManager/recorderManager?id=' + res.result
							})
						} else {
							this.$util.msg(data.msg)
						}
					}, error => {})
				})
			},
			getInit(){
				this.request.httpTokenRequest({
					url: "technician.technician/getAuthStatus",
					method: "get"
				}, {}).then(res => {
					if (res.code == 0) {
						if(res.data.auth && res.data.images && res.data.location && res.data.service){
							this.status = 1
						}else {
							this.status = 0
						}
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
		},
		onLoad() {
			this.getNotice()
		},
		onShow() {
			this.getAuth()
			this.getNum()
			this.getInit()
			this.city = this.$store.state.userLocation.city
		}
	}
</script>

<style lang="scss" scoped>
	.flex {
		flex: 1;
	}
	
	.index {
		background: url(https://qiniu-cdn.maeiyun.com/imgs/technician/index/technician_index_bg.png) 0 0 no-repeat;
		background-size: 100%;
		padding: calc(var(--status-bar-height) + 44px) 0 0;
		min-height: 100vh;
		background-color: #F5F7F8;
	}
	.nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: url(https://qiniu-cdn.maeiyun.com/imgs/technician/index/technician_index_bg.png) no-repeat 0 0;
		background-size: 100%;
		z-index: 99;
		padding-top: var(--status-bar-height);
		.nav_left {
			display: flex;
			align-items: center;
			.address {
				width: 180rpx;
				height: 64rpx;
				background: rgba(255,255,255,0.7);
				border-radius: 32rpx;
				backdrop-filter: blur(10px);
				display: flex;
				align-items: center;
				image {
					width: 22rpx;
					height: 30rpx;
					margin: 0 13rpx 0 27rpx;
				}
				text {
					font-size: 28rpx;
					color: #000000;
					line-height: 40rpx;
				}
			}
			.home {
				width: 64rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-right: 30rpx;
			}
		}
		.nav_right {
			width: 214rpx;
			height: 64rpx;
			background: rgba(255,255,255,0.8);
			border-radius: 32rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			text {
				font-size: 28rpx;
				color: #FF0000;
				line-height: 40rpx;
				margin-left: 15rpx;
			}
		}
	}
	
	.banner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		background: #F5F7F8;
		border-radius: 32rpx 32rpx 0 0;
		padding: 30rpx 30rpx 0;
		margin-top: 30rpx;
		.list {
			width: 329rpx;
			height: 120rpx;
			padding: 0 37rpx;
			margin-bottom: 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			position: relative;
			text {
				font-size: 30rpx;
				color: #69749C;
				line-height: 42rpx;
			}
			i {
				position: absolute;
				right: -10rpx;
				top: -10rpx;
				width: 40rpx;
				height: 40rpx;
				background: red;
				text-align: center;
				line-height: 40rpx;
				border-radius: 50%;
				font-style: normal;
				font-size: 24rpx;
				color: #FFF;
				border: 4rpx solid #FFF;
			}
		}
	}
	
	.box {
		background-color: #F5F7F8;
		padding: 0 30rpx 0;
	}
	
	.notice {
		display: flex;
		align-items: center;
		background: #FFF;
		padding: 10rpx 30rpx;
		.notice_icon {
			display: flex;
			align-items: center;
			image {
				width: 40rpx;
				height: 40rpx;
			}
			text {
				font-size: 28rpx;
				font-weight: 600;
				color: #FF3F15;
				line-height: 40rpx;
			}
		}
	}
	
	.user {
		padding: 0 30rpx 30rpx;
		margin: 30rpx 0;
		background: #FFF;
		.header {
			display: flex;
			justify-content: space-around;
			margin-bottom: 30rpx;
			image {
				width: 354rpx;
				height: 70rpx;
			}
			
		}
		.list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;
			.list_title {
				display: flex;
				align-items: center;
				.num {
					width: 40rpx;
					height: 40rpx;
					background: #B7DCFB;
					border-radius: 50%;
					font-size: 26rpx;
					color: #FFFFFF;
					line-height: 40rpx;
					text-align: center;
					margin-right: 10rpx;
				}
				text {
					font-size: 25rpx;
					color: #333333;
					line-height: 40rpx;
				}
			}
			.btn {
				width: 100rpx;
				height: 40rpx;
				background: linear-gradient(180deg, #EF8693 0%, #EF2930 100%);
				border-radius: 20rpx;
				text-align: center;
				line-height: 40rpx;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
		.no_margin {
			margin: 0;
		}
	}
	
	.card {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
		.list {
			width: 210rpx;
			height: 210rpx;
			background: #FFFFFF;
			border-radius: 14rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 47rpx 0;
			box-sizing: border-box;
			justify-content: space-between;
			margin-bottom: 24rpx;
			image {
				width: 60rpx;
				height: 60rpx;
			}
			text {
				margin-top: 15rpx;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
			}
		}
	}
	
</style>